<template>
    <div class="music">
        <div class="detail" v-if="info">
            <img :src="Arr[n].picUrl">
            <div class="text">
                <ul>
                    <li>
                        <a>{{Arr[n].name}}</a>
                        <i class="fa fa-heart-o"></i>
                    </li>
                    <li>
                        <a>{{Arr[n].ar}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right" v-if="info">
            <span @click="show = !show" class="fa fa-th-list"></span>
        </div>
        <div class="list" v-if="show&&info">
            <div>
                <h3>当前播放列表</h3>
                <p>
                    <a>共 {{num}} 首</a>
                    <span>
                        <i class="fa fa-star-o">收藏全部</i>
                        <i @click="reload()">清空列表</i>
                    </span>
                </p>
            </div>
            <div class="listArr">
                <el-empty v-if="num===0?true:false" description="暂无歌曲"></el-empty>
                <tbody v-else-if="num!==0?true:false" v-for="{dt,ar,name,item} in Arr" :key="item">
                    <td>{{name}}</td>
                    <td>{{ar}}</td>
                    <td style="width:60px">{{formatTime(dt)}}</td>
                </tbody>
            </div>
        </div>
        <div class="player">
            <div class="com">
                <i v-if="info" class="fa fa-retweet" @click="returnMusic(++r)" id="return"></i>
                <button v-bind:disabled="info===false" type="button" class="fa fa-step-backward" @click="go(-1)" id="last"></button>
                <button v-bind:disabled="info===false" type="button" class="fa fa-play" @click="play(isplay=!isplay)" id="play"></button>
                <button v-bind:disabled="info===false" type="button" class="fa fa-step-forward" @click="go(1)" id="next"></button>
                <i v-if="info" class="fa fa-volume-up" @click="voice" id="voice"></i>
                <div class="block" v-if="voiceShow">
                    <el-slider
                    v-model="value"
                    vertical
                    :show-tooltip="false"
                    @input="voiceChange"
                    height="100px">
                    </el-slider>
                </div>
                <div class="progress">
                    <a v-if="info">{{second/60 > 9 ? parseInt(second/60) : '0'+parseInt(second/60) }}:{{second%60 >= 10 ? parseInt(second%60) : '0'+parseInt(second%60)}}</a>
                    <el-progress :percentage="progressing_audio" :format="format"/>
                    <a v-if="info">{{formatTime(Arr[n].dt)}}</a>
                </div>
            </div>
            <audio :src="Arr[n].url" id="audio" autoplay v-if="info"/>
        </div>
    </div>
</template>

<script>
import MusicCom from './MusicCom'
export default {
    name:'Music',
    mixins:[MusicCom]
}
</script>

<style lang="scss" scoped>
@import './MusicCom.scss'
</style>
